/////////////////////////// 轮播图/////////////////////////
$(document).ready(function(){

// 获取标签
var bannerBox= document.querySelector('.banner-box');
var ul = document.querySelector('.banner-box ul');
var ol = document.querySelector('.banner-box ol');
var rightBtn = document.querySelector('.banner-box>a.rightBtn');
var leftBtn = document.querySelector('.banner-box>a.leftBtn');
// 创建ol中的li - 根据ul中此时li的个数
// 循环ul中li的个数，每循环一次，创建一个li放在ol中
for(var a=0; a<ul.children.length; a++) {
    var li = document.createElement('li')
    ol.appendChild(li)
    // 第一个li添加白色背景
    if(a === 0) {
        li.style.backgroundColor = '#fff'
    }
}
// 给ul的前后各复制一个图片li
var firstLi = ul.children[0].cloneNode(true)
var lastLi = ul.children[ul.children.length-1].cloneNode(true)
ul.appendChild(firstLi)
ul.insertBefore(lastLi, ul.children[0])
// 给ul设置宽度
ul.style.width = ul.children.length * firstLi.offsetWidth + 'px'
// 给ul设置left
ul.style.left = -firstLi.offsetWidth + 'px'
// 定义下标
var index = 1
// 定义开关
var onOff = true
// 给右箭头设置点击事件
rightBtn.onclick = function() {
    // 判断开关是否是开启状态
    if(!onOff) return false
    // 一旦图片开始滑动了 - 开关就应该关闭
    onOff = false
    // 下标自增
    index++
    // 设置ul滑动
    animate(ul, {
        left: -index * firstLi.offsetWidth
    }, function() {
        // 判断index的最大值
        if(index === ul.children.length-1) {
            index = 1
            // 设置ul
            ul.style.left = -index * firstLi.offsetWidth + 'px'
        }
        // 设置小点
        for(let a=0; a<ol.children.length; a++) {
            ol.children[a].style.backgroundColor = '#666'
        }
        ol.children[index-1].style.backgroundColor = '#fff'
        // 打开开关
        onOff = true
    })
    // 阻止默认行为
    return false
}

leftBtn.onclick = function() {
     // 判断开关是否是开启状态
     if(!onOff) return false
    // 一旦图片开始滑动了 - 开关就应该关闭
    onOff = false
    // 下标自增
    index--
    // 设置ul滑动
    animate(ul, {
        left: -index * firstLi.offsetWidth
    }, function() {
        // 判断index的最大值
        if(index === 0) {
            index = ul.children.length - 2
            // 设置ul
            ul.style.left = -index * firstLi.offsetWidth + 'px'
        }
        // 设置小点
        for(let a=0; a<ol.children.length; a++) {
            ol.children[a].style.backgroundColor = '#666'
        }
        ol.children[index-1].style.backgroundColor = '#fff'
        onOff = true
    })
    // 阻止默认行为
    return false
}

for(let b=0; b<ol.children.length; b++) {
    ol.children[b].onclick = function() {
         // 判断开关是否是开启状态
        if(!onOff) return false
        // 一旦图片开始滑动了 - 开关就应该关闭
        onOff = false
        // 下标自增
        index = b + 1
        // 设置ul滑动
        animate(ul, {
            left: -index * firstLi.offsetWidth
        }, function() {
            // 判断index的最大值
            if(index === 0) {
                index = ul.children.length - 2
                // 设置ul
                ul.style.left = -index * firstLi.offsetWidth + 'px'
            }
            // 设置小点
            for(let a=0; a<ol.children.length; a++) {
                ol.children[a].style.backgroundColor = '#666'
            }
            ol.children[index-1].style.backgroundColor = '#fff'
            onOff = true
        })
    }
}

var timer = setInterval(function() {
    rightBtn.onclick()
}, 1000)

bannerBox.onmouseover = function() {
    clearInterval(timer)
}
bannerBox.onmouseout = function() {
    timer = setInterval(function() {
        rightBtn.onclick()
    }, 1000)
}

function animate(ele, obj, fn = function() {}) {
    // 定义计数器 - 统计定时器个数的
    let k = 0
    for(let key in obj) {
        k++
        // 获取target
        let target = obj[key]
        // 如果是透明度
        if(key === 'opacity') {
            target *= 100
        }
        // 获取当前值
        let currentStyle = getComputedStyle(ele)[key]
        // 如果是透明度
        if(key === 'opacity') {
            currentStyle *= 100
        }
        // 取整
        currentStyle = parseInt(currentStyle)
        let timer = setInterval(function() {
            // 定义速度
            let speed = (target - currentStyle) / 20
            // 取整
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed)
            // 加大
            currentStyle += speed
            // 设置元素样式
            // 如果是透明度
            if(key === 'opacity') {
                ele.style[key] = currentStyle / 100
            } else {
                ele.style[key] = currentStyle + 'px'
            }
            // 最大值的限制
            if(currentStyle === target) {
                clearInterval(timer)
                k--
                if(k === 0) {
                    fn()
                }
            }
        }, 20)
    }
}


})

///////////////////获取cookie////////////////
$(document).ready(function(){

    window.onload = function() {
        // 获取cookie
        var username = getCookie('username')
        // 做判断
        if(username) {
            // 换内容
            // 获取标签
            var loginAndRegister = document.querySelector('.loginAndRegister');
            // 给标签设置内容
            loginAndRegister.innerHTML = `
            <a href="./personalData.html"><span>欢迎<b style="margin: 0 10px;">${username}</b></span></a>
                <a onclick="logout()" href="javascript:;">退出</a>
            `
        }
    }
    
})
function logout() {
    if(confirm('你确定要退出吗？')) {
        removeCookie('username')
        var loginAndRegister = document.querySelector('.loginAndRegister');
        loginAndRegister.innerHTML = `
            <a href="login.html">登录</a>
            <a href="register.html">注册</a>
        `
    }
}


///////////////// 选项卡///////////////////////////
$(document).ready(function(){
// 获取标签
var itemBoxli= document.querySelectorAll('.item-box li');
var rightWrapper=document.querySelector('.right-wrapper')
var rightWrapperli=document.querySelectorAll('.right-wrapper li')
// console.log(rightWrapperli)
// console.log(itemBoxli)
for(var a=0;a<itemBoxli.length;a++){
    // 给每个li添加属性 - 值是他们的下标
    itemBoxli[a].index = a 
    itemBoxli[a].onmouseover=function(){
        // 将right-wrapper显示
        rightWrapper.style.display='block'
        // 让所有li失去active类名
        for(var b=0;b<itemBoxli.length;b++){
            itemBoxli[b].className=''
            rightWrapperli[b].className=''
        }
        // 添加active类名
        this.className='active'
        // 获取this的下标
        var i = this.index
        // console.log(i)
        // 给ol下所有li中对应下标的那个li添加active类名
        rightWrapperli[i].className = 'active'
        console.log(rightWrapperli[i])
        
    }
    itemBoxli[a].onmouseout=function(){
        // 将right-wrapper隐藏
        rightWrapper.style.display='none'
        // 去掉active类名
        this.className=''
    }

}
// 鼠标移入选项卡中详情页显示
rightWrapper.onmouseover=function(){
    rightWrapper.style.display='block'
}
// 鼠标移出选项卡中详情页隐藏
rightWrapper.onmouseout=function(){
    rightWrapper.style.display='none'
}

})


// ///////////////////内容区域一/////////////////////////
$(document).ready(function(){
    var middleBoxa= document.querySelectorAll('.middle-box a');
    // console.log(middleBoxa)
    // 给middleBox下面的a标签添加鼠标移入事件
    // 遍历middleBox下面的a标签
    for(var a=0;a<middleBoxa.length;a++){
        // 添加鼠标移入事件
        middleBoxa[a].onmouseover=function(){
            this.style.marginTop='-5px'
            this.style.boxShadow= '-5px 5px 15px 0px #666,5px 5px 15px 0px #666'
        }
        middleBoxa[a].onmouseout=function(){
            this.style.marginTop='0px'
            this.style.boxShadow= ''
        }
    }
})



/////////////////////// 商品动态渲染////////////////////////
var data = null
var start = 0
var end = 10
var flag = true
$(document).ready(function() {
    // 发送ajax请求，获取数据
    $.get('/api/getGoods', res => {
        res = JSON.parse(res)
        /*
        <div class="thumbnail">
            <img src="..." alt="...">
            <div class="caption">
                <h3>Thumbnail label</h3>
                <p>...</p>
                <a href="#" class="btn btn-default" role="button">查看详情</a>
            </div>
        </div>
        */
        // console.log(res);
        data = res.data
        contHTML()
    })

    window.onscroll = function() {
            // 获取滚动的距离
            // document.documentElement.scrollTop
            // 滚动距离有兼容问题，这种写法只适用于当前网页有文档声明的情况
            // var t = document.documentElement.scrollTop

            // 如果没有文档声明
            // var t = document.body.scrollTop
            // console.log(t);

            // 兼容写法
            // 短路运算
        var t = document.documentElement.scrollTop || document.body.scrollTop
        if(t >= 400){
            // console.log(1);
            // 让回到顶部标签出来 - 给标签设置height
            $('.totop').css('height','20px')
        } else {
            $('.totop').css('height','0')
        }
        if(t > document.body.clientHeight - 1200) {
            loadHTML()
        }
    }

    function contHTML() {
        if(!flag) return false
        flag = false
        if(start >= data.length-1) return false 
        var arr = data.slice(start, end)
        var str = ''
        arr.forEach((item, index) => {
            // if(index === 0) {
            //     str += `
            //         <a href="" class="first"><img src="${item.img_big_logo}" alt=""></a>
            //     `
            // } else {
                str += `
                    <a href="">
                        <div class="top-label label-orange">${item.top_label}</div>
                        <div class="item-img">
                            <img src="${item.img_big_logo}" alt="360可视门铃5MAX">
                        </div>
                        <p class="name">${item.name}</p>
                        <p class="desc" title="2.5K双摄超大视野">${item.title}</p>
                        <p class="price">
                            <span class="cur-price">${item.price.cur_price}</span>
                            <span class="old-price">${item.price.old_price}</span>
                        </p>
                    </a>
                    `
            // }
            
        })
        $('[name="clearfix01"]').html($('[name="clearfix01"]').html()+ str)
        $('[name="clearfix02"]').html($('[name="clearfix02"]').html()+ str)
        $('[name="clearfix03"]').html($('[name="clearfix03"]').html()+ str)
        $('[name="clearfix04"]').html($('[name="clearfix04"]').html()+ str)
        $('[name="clearfix05"]').html($('[name="clearfix05"]').html()+ str)
        flag = true
    }

    function loadHTML() {
        if(!flag) return false
        flag = false
        if(start >= data.length-1) return false 
        var arr = data.slice(start, end)
        var str = ''
        arr.forEach((item,) => {
                str += `
                    <a href="">
                        <div class="top-label label-orange">${item.top_label}</div>
                        <div class="item-img">
                            <img src="${item.img_big_logo}" alt="360可视门铃5MAX">
                        </div>
                        <p class="name">${item.name}</p>
                        <p class="desc" title="2.5K双摄超大视野">${item.title}</p>
                        <p class="price">
                            <span class="cur-price">${item.price.cur_price}</span>
                            <span class="old-price">${item.price.old_price}</span>
                        </p>
                    </a>
                    `
            // }
            
        })
        $('[name="clearfix"]').html($('[name="clearfix"]').html() + str)
        start = end
        end += 10
        flag = true
    }

    $('.totop').click(function(){
        // 可以给滚动距离赋值，设置滚动条位置
        document.documentElement.scrollTop = 0
    })
    
})







